<template>
  <div class='userinterestlist'>
 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;padding-bottom: 0px;
    display: flex;justify-content: space-between">

      <el-form :inline="true" :model="usergetuserinterrs">
        <el-form-item>
          <el-input
            v-model="usergetuserinterrs.uid"
            :placeholder="$t('iptdefault.username')"
          ></el-input>
        </el-form-item>

        <el-form-item :label="$t('iptdefault.timeselect')">
          
          <el-col :span="11">
            <el-date-picker
              type="date"
              :placeholder="$t('iptdefault.starttime')"
              v-model="usergetuserinterrs.start"
              style="width: 100%"
            ></el-date-picker>
          </el-col>

          <el-col class="line" :span="2" style="text-align: center">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              :placeholder="$t('iptdefault.endtime')"
              v-model="usergetuserinterrs.end"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" v-on:click="getuserinterst">{{$t('publicbtn.query')}}</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getuserinterstRefresh">{{$t('publicbtn.refresh')}}</el-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true" style="display:flex;align-item:center;">
         <el-form-item>
          <el-button type="primary" @click="exportexcel">{{$t('publicbtn.exportalldata')}}</el-button>
        </el-form-item> 
       <excelexport></excelexport>
      </el-form>
    </el-col>

    <!-- 列表 -->
        <el-table
      v-loading="loading"
      :data="userinterestlist"
      style="width: 100%"
      id="out-table">
    <el-table-column prop="userId" :label="$t('field.userid')" width="230" fixed="left"></el-table-column>
    <el-table-column prop="name" :label="$t('field.upusername')" width="230" fixed="left"></el-table-column>
    <el-table-column prop="username" :label="$t('field.cellphones')" width="230" fixed="left"></el-table-column>
    <el-table-column prop="crypto" :label="$t('field.digitalcurrencys')" width="230"></el-table-column>  
       
       <el-table-column prop="num" :label="$t('field.pledgequantity')" width="230">
         <template slot-scope="props">
           {{
              (props.row.num / million).toFixed(8)
           }}
         </template>
       </el-table-column>
      <el-table-column prop="type" :label="$t('stakinglist.type')" width="230">
         <template slot-scope="props">
       {{
            props.row.type == 1 ? $t('field.current'): props.row.type == 2 ?$t('field.regular')+'('+ props.row.lockDay+$t('field.day')+')':''
          }}
         </template>
      </el-table-column>
    <el-table-column prop="cycle" :label="$t('field.payoutperiod')" width="230"></el-table-column>  
    
    <el-table-column prop="rate" :label="$t('field.interest')" width="230">
       <template slot-scope="props">
          {{
            (props.row.rate * 100).toFixed(1) + '%'
          }}
        </template>
      </el-table-column> 

      <el-table-column prop="referral" :label="$t('field.recommenderId')" width="250"> </el-table-column>

    <el-table-column prop="time" :label="$t('field.payoutperiodtime')" width="230">
       <template slot-scope="props">
          {{
            props.row.time | formatDate
          }}
        </template>
      </el-table-column> 
    <el-table-column prop="interest" :label="$t('field.profit')" width="230">
       <template slot-scope="props">
          {{
            (props.row.interest / million).toFixed(8)
          }}
        </template></el-table-column> 
    </el-table>
     <!--分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="userinteresTotal"
        :page-size="usergetuserinterrs.size"
        @current-change="current_changes"
        :current-page="usergetuserinterrs.page"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import excelexport from '@/components/export.vue'
import exportData from "@/components/export.js";
import {postUserRequest, getUserRequest,getNudataRequest } from "@/api/api";

export default {
  name:'userinterestlist',
  components:{
    excelexport
},
  data() {
    return {
    loading:true,
    userinterestlist:[],
    userinteresTotal:null,
    usergetuserinterrs:{
    uid:'',
    page:1,
    size:10,
    start:'',
    end:'',
        },
    
    };
  },
  computed: {},
  watch: {},
  methods: {
getuserInterrst(){
  this.loading = true
  var getuserinterrsMsg =JSON.parse(JSON.stringify(this.usergetuserinterrs))
 if(getuserinterrsMsg.start) getuserinterrsMsg.start = new Date(getuserinterrsMsg.start).getTime()
 if(getuserinterrsMsg.end) getuserinterrsMsg.end = new Date(getuserinterrsMsg.end).getTime()
 getUserRequest(getuserinterrsMsg,'/staking/userInterestList').then(res=>{
    const data = res.data
    if(data.code==200){
    this.userinterestlist = data.data.list
    this.userinteresTotal = data.data.total
    
    }else{
      this.$message({
      message: data.message,
      type: "error",
    });
          }
  this.loading = false

  })
},
// 查询
getuserinterst(){
  // 转换时间戳
this.time = this.moment(1619972820000).format("YYYY-MM-DD HH:mm:ss")

this.usergetuserinterrs.page = 1
this.getuserInterrst()
},
//刷新
getuserinterstRefresh(){
this.usergetuserinterrs.page = 1
this.getuserInterrst()
 },
//分页   
current_changes(pager) {
this.usergetuserinterrs.page = pager;
this.getuserInterrst();
},

//导出全部数据 
exportexcel(){
  let tableDatatilte = ['userId','name','username','crypto', 'num','type',  'cycle','rate','referral','time','interest']
  let tableData = [[ 
  this.$t('field.userid'),
  this.$t('field.upusername'),
  this.$t('field.cellphones'),
  this.$t('field.digitalcurrencys'),
  this.$t('field.pledgequantity'),
  this.$t('stakinglist.type'),
  this.$t('field.payoutperiod'),
  this.$t('field.interest'),
  this.$t('field.recommenderId'),

  this.$t('field.payoutperiodtime'),
  this.$t('field.profit')]]
  let datamsg = {start:'',end:'',uid:this.usergetuserinterrs.uid,size:this.million,page:1 }
  datamsg.start = JSON.parse(JSON.stringify(this.usergetuserinterrs.start))
  datamsg.end = JSON.parse(JSON.stringify(this.usergetuserinterrs.end))
  if(datamsg.start &&datamsg.end){
        if(datamsg.start !='') datamsg.start = (new Date(datamsg.start)).getTime();
        if(datamsg.end !='') datamsg.end = (new Date(datamsg.end)).getTime();
         getUserRequest(datamsg,'/staking/userInterestList').then(res=>{
        var datalist = res.data.data.list
        for(let i = 0;i < datalist.length; i++){
          datalist[i].rate = (datalist[i].rate * 100).toFixed(1) + '%' 

          datalist[i].num = (datalist[i].num / this.million).toFixed(8)
          datalist[i].type= datalist[i].type ==1?this.$t('stakinglist.current'): datalist[i].type ==2?this.$t('stakinglist.regular')+'('+ datalist[i].lockDay+this.$t('field.day')+')':''
          if(datalist[i].time){
          datalist[i].time = this.moment(datalist[i].time).format("YYYY-MM-DD HH:mm:ss")
          }else{
          datalist[i].time = '-'
          }
        datalist[i].interest =(datalist[i].interest /this.million).toFixed(8)
        }
        let exportName = this.$t('export.userInterestList')
        exportData.exportTable(datalist,tableData,tableDatatilte,exportName)
           
         })
  }else{
      this.$message({
        message:this.$t('bulletframe.selecttime'),
        type: "error",
      });
    }
  


}

  },
  created() {

  },
  mounted() {
this.getuserInterrst()

  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style scoped>
.pagination {
  text-align: center;
  margin-top: 20px;
}
</style>